<template>
  <el-menu active-text-color="#497fa3" ref="menuRef">
    <menuItem
      v-for="menu in menuList"
      :key="menu.title"
      :menu="menu"
    ></menuItem>
  </el-menu>
</template>

<script>
import menuItem from './menuItem.vue'
export default {
  props: {
    menuList: {
      type: Array,
      default: () => [
        {
          path: '/wisdomConstruction/projectOverview',
          title: '项目看板',
          icon: 'xiangmukanban',
          id: 451
        },
        {
          path: '/wisdomConstruction/messageManagement',
          title: '建设项目管理',
          icon: 'xiangmuxinxinguanli',
          id: 452
        },
        {
          path: 'danganguanli',
          title: '项目档案管理',
          icon: 'xiangmudanganguanli',
          id: 453,
          children: [
            {
              path: '/wisdomConstruction/fileManagement/preliminaryProcedure',
              title: '前期手续',
              icon: 'qianqishouxu'
            },
            {
              path: '/wisdomConstruction/fileManagement/projectDesign',
              title: '项目设计',
              icon: 'xiangmusheji'
            },
            {
              path: '/wisdomConstruction/fileManagement/projectBidding',
              title: '项目招标',
              icon: 'xiangmuzhaobiao'
            },
            {
              path: '/wisdomConstruction/fileManagement/projectImply',
              title: '项目实施',
              icon: 'xiangmushishi'
            },
            {
              path: '/wisdomConstruction/fileManagement/projectSettlement',
              title: '项目结算、决算',
              icon: 'xiangmujiesuan'
            }
          ]
        },
        {
          path: '/wisdomConstruction/projectExport',
          title: '项目导出',
          icon: 'xiangmudaochu',
          id: 454
        },
        {
          path: '/wisdomConstruction/reportManagement',
          title: '安全报告管理',
          icon: 'anquanbaogaoguanli',
          id: 455
        },
        {
          path: '/wisdomConstruction/noticeManagement',
          title: '通知管理',
          icon: 'tongzhiguanli',
          id: 456
        }
        // {
        //   path: '/wisdomConstruction/epidemicManagement',
        //   title: '疫情管理',
        //   icon: 'yiqingguanli',
        //   id: 457
        // }
      ]
    }
  },
  components: {
    menuItem
  },
  mounted() {
    this.openActiveMenu(this.menuList)
  },
  methods: {
    openActiveMenu(menuList, parent) {
      menuList.forEach((item) => {
        if (this.$route.path.match(item.path) && parent) {
          this.$refs.menuRef.open(parent.title)
        }
        if (item.children) {
          this.openActiveMenu(item.children, item)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-menu-item,
::v-deep .el-submenu__title {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  .svg-icon {
    margin-right: 12px;
  }
}
</style>
